$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .jx {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    text-align: right;

    img {
      max-width: 100%;
    }
  }

  .title {
    width: 80vw;
    margin: 0 auto 3vw auto;
    padding-top: 10vw;
    .cn {
      color: #111;
      font-size: $fontSize_64;
      font-weight: 600;
    }

    .en {
      font-family: 'Montserrat-Regular';
      color: rgba(224, 28, 28, 1);
      font-size: $fontSize_28;
      font-weight: 600;
      margin-top: 10px;
    }
  }

  .section1 {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    a {
      color: #111;
      font-size: $fontSize_14;
    }

    span {
      width: 8px;
      height: 2px;
      background-color: rgba(224, 28, 28, 1);
      margin: 0 1vw;
    }

    p {
      color: #666;
      font-size: $fontSize_14;
    }
  }

  .section2{
    background-color: #fff;
    padding: 50/$f+vw 0 120/$f+vw 0;
    margin: 107/$f+vw 0 0 0;
    .wrap{
        width: 80vw;
        margin: auto;
        display: flex;
        justify-content: space-between;
        .headline{
            h1{
                font-size: 50/$f+vw;
                color: #111;
                margin: 0 0 12/$f+vw;
            }
            p{
                font-size: 20/$f+vw;
                color: #111;
            }
        }
        .content{
            width: 930/$f+vw;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            input{
                width: 430/$f+vw;
                height: 62/$f+vw;
                padding: 0 0 0 20/$f+vw;
                border-radius: 10/$f+vw;
                border: 1px solid #EDEDED;
                background: #F9F9F9;
                font-size: 16/$f+vw;
                margin: 0 0 20/$f+vw;
                &::placeholder{
                    color: #999;
                }
                &.all{
                    width: 100%;
                }
            }
            textarea{
                width: calc(100% - 1.04vw);
                height: 140px;
                border-radius: 10/$f+vw;
                border: 1px solid #EDEDED;
                background: #F9F9F9;
                font-size: 16/$f+vw;
                padding: 20/$f+vw 0 0 20/$f+vw;
                resize: none;
                font-family: inherit;
                &::placeholder{
                    color: #999;
                }
            }
            button{
              cursor: pointer;
              background: transparent;
                margin: 50/$f+vw 0 0 0;
                border: 1px solid rgba(224, 28, 28, 1);
                display: flex;
                align-items: center;
                padding: .5vw 2vw;
                border-radius: 30px;
                width: fit-content;
                font-size: $fontSize_18;
                color: #E01C1C;
                transition: all 600ms;
                margin: 2vw 0 0 0;
      
                svg {
                  path {
                    transition: all 600ms;
                  }
                }
      
                p {
                  margin-right: 0.6vw;
                  font-weight: bold;
                }
      
                svg {
                  width: 24/$f+vw;
                  display: block;
                }
      
                &:hover {
                  background-color: rgba(224, 28, 28, 1);
                  color: white;
      
                  svg {
                    path {
                      stroke: #fff;
                    }
                  }
                }
            }
        }
    }
  }

  .section3{
    width: 100%;
    position: relative;
    #container{
        width: 100%;
        height: 800/$f+vw;
    }
    .position{
      width: 370/$f+vw;
      border-radius: 20/$f+vw;
      background: rgba(255, 255, 255, 0.70);
      backdrop-filter: blur(5px);
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 201/$f+vw;
      z-index: 2;
      box-sizing: border-box;
      padding: 50/$f+vw;
      .list{
        display: block;
        &:not(:last-child) {
          margin: 0 0 20/$f+vw;
        }
        .add{
          display: flex;
          align-items: center;
          margin: 0 0 10/$f+vw;
          .icon{
            width: 19/$f+vw;
            height: 19/$f+vw;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10/$f+vw 0 0;
          }
          h1{
            font-size: 20/$f+vw;
            color: #111;
            line-height: 30/$f+vw;
            margin: 0;
          }
        }
        .hover_pick{
          display: flex;
          align-items: center;
          position: relative;
          z-index: 5;
          .show{
            display: flex;
            align-items: center;
            cursor: pointer;
            &:hover ~ .hide{
              opacity: 1;
            }
          }
          .img{
            width: 12/$f+vw;
            height: 12/$f+vw;
            margin: 0 5/$f+vw 0 0;
            position: relative;
            top: 2/$f+vw;
          }
          p{
            font-size: 15/$f+vw;
            color: #111;
          }
          .hide{
            position: absolute;
            bottom: 100%;
            left: 10/$f+vw;
            z-index: 5;
            background-color: #fff;
            opacity: 0;
            transition: .3s;
            pointer-events: none;
          }
        }
        .pick{
          font-size: 15/$f+vw;
          color: #111;
          line-height: 22/$f+vw;
        }
      }
    }
  }

  .section7 {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .item {
      width: 50%;
      position: relative;

      .bg {
        overflow: hidden;
        height: 100%;
        img {
          width: 100%;
          display: block;
          object-fit: cover;
          transition: all 600ms;
          height: 100%;
          transform: scale(1.01);
        }
      }

      .text {
        position: absolute;
        left: 10vw;
        top: 50%;
        transform: translateY(-50%);
        color: white;

        .p1 {
          color: #FFF;
          font-size: $fontSize_54;
          font-weight: 700;
        }

        .p2 {
          color: #FFF;
          font-size: $fontSize_22;
          font-weight: 700;
        }
      }

      .btn {
        position: absolute;
        right: 5%;
        bottom: 5%;
        border: 2px solid white;
        width: fit-content;
        padding: 0.3vw 1.8vw;
        border-radius: 30px;
        transition: all 600ms;

        svg {
          display: block;
          transition: all 600ms;
        }

        &:hover {
          background-color: rgba(224, 28, 28, 1);
          border-color: rgba(224, 28, 28, 1);

          svg {
            transform: translateX(10px);
          }
        }
      }

      &:hover {
        .bg {
          img {
            transform: scale(1.05);
          }
        }
      }
    }
  }


  @media screen and (max-width: 1024px) {
    padding-top: 70px;
    .title{
      width: 90%;
      padding-top: 20px;
      .cn{
        font-size: 24px;
      }
      .en{
        font-size: 18px;
      }
    }

    .section1{
        width: 90%;
        a,p{
          font-size: 14px;
        }
      }

      .section2 {
        padding: 50px 0;
        .wrap{
          width: 90%;
          flex-direction: column;
          .headline{
            h1{
              font-size: 24px;
              margin: 0 0 10px;
            }
            p{
              font-size: 18px;
            }
          }
          .content{
            width: 100%;
            margin: 20px 0 0 0;
            input{
              width: 100%;
              height: 50px;
              font-size: 16px;
              padding: 0 0 0 10px;
              margin: 0 0 15px;
            }
            textarea{
              width: 100%;
              height: 150px;
              font-size: 16px;
              padding: 10px 0 0 10px;
              margin: 0 0 15px;
            }
            button{
              font-size: 16px;
              padding: 5px 25px;
              margin: 20px 0 0 0;
              svg{
                width: 15px;
              }
            }
          }
        }
      }

      .section3{
        #container{
          height: 350px;
        }
        .position{
          position: static;
          width: 100%;
          padding: 5%;
          transform: none;
          .list{
            &:not(:last-child) {
              margin: 0 0 20px;
            }
            .add{
              margin: 0 0 10px;
              .icon{
                width: 22px;
                height: 22px;
                margin: 0 8px 0 0;
              }
              h1{
                font-size: 20px;
              }
            }
            .pick{
              font-size: 16px;
              line-height: 2;
            }

            .hover_pick{
              .show{
                img{
                  width: 14px;
                  height: 14px;
                  margin: 0 8px 0 0;
                }
                p{
                  font-size: 16px;
                }
              }
            }
          }
        }
      }

      .section7{
        flex-direction: column;
        .item{
          width: 100%;
          .text{
            left: 5%;
            .p1{
              font-size: 20px;
            }
            .p2{
              font-size: 16px;
            }
          }
          .btn{
            padding: 5px 25px;
            bottom: 20px;
          }
        }
      }
    
  }
  
}